<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="所属车商">
                    <el-select v-model="form.storeId" placeholder="请选择">
                        <el-option v-for="store in stores" :key="store.id" :value="store.id" :label="store.storeName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型品牌">
                    <el-select v-model="form.carBrand" placeholder="请选择" @change="brandChange">
                        <el-option v-for="carBrand in carBrands" :key="carBrand.brand_id" :label="carBrand.car_name" :value="carBrand.brand_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型车系">
                    <el-select v-model="form.carSeries" placeholder="请选择" @change="seriesChange">
                        <el-option v-for="series in carSeries" :key="series.series_id" :value="series.series_id" :label="series.car_series_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型年代">
                    <el-select v-model="form.year" placeholder="请选择" @change="yearChange">
                        <el-option v-for="year in years" :key="year.car_year" :value="year.car_year" :label="year.car_year"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型">
                    <el-select v-model="form.modelId" placeholder="请选择" @change="modelChange">
                        <el-option v-for="model in models" :key="model.model_id" :value="model.model_id" :label="model.model_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="颜色">
                    <el-select v-model="form.color" placeholder="请选择">
                        <el-option v-for="color in colors" :key="color" :value="color" :label="color"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型大小">
                    <el-select v-model="form.carModel" placeholder="请选择">
                        <el-option v-for="model in carModel" :key="model.id" :value="model.id" :label="model.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车型排量">
                    <el-select v-model="form.carEngineVolume" placeholder="请选择">
                        <el-option v-for="volume in carEngineVolumes" :key="volume" :value="volume" :label="volume">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变速箱类型">
                    <el-select v-model="form.transmissionType" placeholder="请选择">
                        <el-option v-for="type in cartransmissionTypeS" :key="type.id" :value="type.id" :label="type.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排放标准">
                    <el-select v-model="form.emissionStandard" placeholder="请选择">
                        <el-option v-for="em in emissionStandards" :key="em.id" :value="em.id" :label="em.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车价">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="是否热门">
                    <el-radio v-model="form.isHot" label="1">是</el-radio>
                    <el-radio v-model="form.isHot" label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="上传图片">
                    <el-upload action="http://test.allblux.wang/hz/resource/upload" class="avatar-uploader" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import { getCarStores, getCarBrands, getCarSeriesById, getYears, getModel, editCars } from '../../api/server.js'
export default {
    data() {
        return {
            form: {
            },
            stores: [],
            carBrands: [],
            carSeries: [],
            carModel: [
                {
                    id: 1,
                    name: '微小型车'
                },

                {
                    id: 2,
                    name: '紧凑型车'
                },

                {
                    id: 3,
                    name: '中型车'
                },
                {
                    id: 4,
                    name: '中大型车'
                },
                {
                    id: 5,
                    name: 'suv'
                },
                {
                    id: 6,
                    name: 'mpv'
                },
                {
                    id: 7,
                    name: '跑车'
                },
                {
                    id: 8,
                    name: '皮卡'
                },

                {
                    id: 9,
                    name: '微面'
                }
            ],
            cartransmissionTypeS: [
                {
                    id: 1,
                    name: '自动'
                }, {
                    id: 2,
                    name: '手动'
                }

            ],
            carEngineVolumes: [
                1.0, 1.3, 1.4, 1.5, 1.6, 1.8, 2.0, 2.5, 3.0, 4.0
            ],
            colors: [],
            emissionStandards: [
                {
                    id: 1,
                    name: '国1'
                },
                {
                    id: 2,
                    name: '国2'
                },
                {
                    id: 3,
                    name: '国3'
                },
                {
                    id: 4,
                    name: '国4'
                },
                {
                    id: 5,
                    name: '国5'
                },
                {
                    id: 6,
                    name: '国6'
                },
            ],
            years: [],
            models: [],
            imageUrl: '',
            tmpModel: {}
        }
    },
    created() {
    },
    methods: {
        getCarStore() {
            getCarStores()
                .then(res => {
                    this.stores = res.result
                })
        },
        getCarBrand() {
            getCarBrands()
                .then(res => {
                    this.carBrands = res.result
                })
        },
        brandChange() {
            let obj = { id: this.form.carBrand }
            getCarSeriesById(obj).
                then(res => {
                    this.carSeries = res.result
                    // this.form.carSeries = res.result[0].series_id
                })
        },
        seriesChange() {
            let obj = { id: this.form.carSeries }
            console.log('obj', obj)
            getYears(obj)
                .then(res => {
                    this.years = res.result
                })
        },
        yearChange() {
            let obj = { seriesId: this.form.carSeries, year: this.form.year }
            getModel(obj)
                .then(res => {
                    this.models = res.result
                })
        },
        handleAvatarSuccess(res, file) {
            console.log('res', res)
            this.imageUrl = URL.createObjectURL(file.raw);
            this.form.carImgs = res.result
        },
        modelChange() {
            console.log('model', this.models)
            console.log('color', this.form.modelId)
            let tmp = this.models.find(it => it.model_id == this.form.modelId)
            this.tmpModel = tmp
            this.colors = tmp.outColor.split(',').map(it => {
                let tmp = it.substring(0, it.indexOf('#'))
                return tmp
            }).filter((item, index, self) => {
                return self.indexOf(item) == index
            })
            console.log(this.colors)
        },
        onSubmit() {
            console.log('this.form', this.form)
            console.log('this.tmp', this.tmpModel)
            let obj = {
                carImgs: this.form.carImgs,
                carPrice: this.form.price,
                carName: this.tmpModel.model_name,
                carYear: this.form.year
                , carEngineVolume: this.form.carEngineVolume,
                storeId: this.form.storeId,
                carIsHot: this.form.isHot,
                brandId: this.form.carBrand,
                seriesId: this.form.carSeries,
                carModel: this.form.carModel,
                transmissionType: this.form.transmissionType,
                emissionStandard: this.form.emissionStandard,
                color: this.form.color,
                modelId: this.tmpModel.model_id,
                modelName: this.tmpModel.model_name
            }
            editCars(obj)
                .then(res => {

                })

        }
    },
    mounted() {
        this.getCarStore()
        this.getCarBrand()
    }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>